<script>
import {ElMessage} from "element-plus";

export default {
    name: "StudentView",
    data(){
        return{
            students: [],
            total: 0,      //总数
            current: 1,    //当前页数
            pageSize: 10,  //页面大小
            search: '',
            keyword:'',
            dialogFormVisible: false,  //对话框是否显示
            student: {} //当前学生
        }
    },
    methods:{
        //分页查询学生
        loadStudents(current){
            this.current = current;
            //使用axios请求后台
            this.$axios.get('/findStudentsPage?current=' + this.current + '&pageSize=' + this.pageSize)
                .then(result => {
                    if(result.data.code === 200){
                        this.students = result.data.data.data;
                        this.total = result.data.data.total;
                    }
                })
        },
        refrash(){
            this.loadStudents(1);
        },
        //编辑学生
        editStudent(stu){
            this.dialogFormVisible = true;
            //学生回显效果  stu --> string ---> 对象 深克隆
            this.student = JSON.parse(JSON.stringify(stu));
        },
        updatestudents(){
            this.dialogFormVisible=false;
            this.$axios.post('/updateId?id='+this.student.id+"&name="+this.student.name+"&age="+this.student.age+"&gender="
                +this.student.gender+"&idcard="+this.student.idcard+"&address="+this.student.address)
                .then(result=>{
                    if (result.data.code ===200){
                        ElMessage.success('修改成功');
                        this.refrash();
                    }
                })
            this.refrash();
        }
    },
    mounted() {
        this.loadStudents(1);
    }
}
</script>

<template>
    <el-table :data="students" style="width: 100%">
        <el-table-column label="编号" prop="id" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="性别" prop="gender" />
        <el-table-column label="年龄" prop="age" />
        <el-table-column label="身份证号" prop="idcard" />
        <el-table-column label="籍贯" prop="address" />
        <el-table-column align="right">
            <template #header>
                <el-input v-model="keyword" size="small" placeholder="搜索学生" clearable @clear="refrash"/>
            </template>
            <template #default="scope">
                <el-button size="small" @click="editStudent(scope.row)">
                    更新
                </el-button>
                <el-button
                        size="small"
                        type="danger"
                >
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                   @current-change="loadStudents" />


  <!--    学生编辑对话框-->
    <el-dialog v-model="dialogFormVisible" title="学生信息" width="500">
        <el-form :model="student">
            <el-form-item label="姓名" >
                <el-input v-model="student.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" >
                <el-input v-model="student.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" >
                <el-input v-model="student.gender" autocomplete="off" />
            </el-form-item>
            <el-form-item label="身份证号" >
                <el-input v-model="student.idcard" autocomplete="off" />
            </el-form-item>
            <el-form-item label="籍贯" >
                <el-input v-model="student.address" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updatestudents" >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<style scoped>

</style>